<template>
  <div class="search-form-container">
    <el-row ref="searchRow" type="flex" justify="start" align="middle">
      <slot />
      <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      <el-button type="info" size="small" icon="el-icon-close" @click="handleClear">清空</el-button>
    </el-row>
  </div>
</template>
<script>

export default {
  name: 'SearchForm',
  data() {
    return {
    }
  },
  methods: {
    handleSearch() {
      this.$emit('search-submit', {})
    },
    handleClear() {
      this.$refs.searchRow.$children.forEach(c => c.$emit('search-clear'))
      this.handleSearch()
    }
  }
}
</script>
<style scoped>
  /deep/ .search-item {
      margin-right: 10px;
  }
</style>
